<template>
  <el-dialog v-dialogDrag :visible.sync="dialogVisible" :title="title" width="750px" @close="resetForm('ruleForm')">
    <button-group ref="buttonGroup" @submitForm="submitForm('ruleForm')" @cancel="dialogVisible = false" />
    <el-row>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="收货单号" prop="receiptId">
              <el-select v-model="ruleForm.receiptId" style="width: 100%" filterable>
                <el-option v-for="item in receiptNoList" :key="item.id" :label="item.receiptNo" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="退货数量" prop="quantityOfReturned">
              <el-input-number v-model="ruleForm.quantityOfReturned" style="width: 100%" :precision="0" :min="0" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="收货数量" prop="quantityReceived">
              <el-input-number v-model="ruleForm.quantityReceived" style="width: 100%" :precision="0" :min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库数量" prop="storageQuantity">
              <el-input-number v-model="ruleForm.storageQuantity" style="width: 100%" :precision="0" :min="0" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="供方批号" prop="supplierLotNo">
              <el-input v-model="ruleForm.supplierLotNo" maxlength="200" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="及时率" prop="timelinessRate">
              <el-input-number v-model="ruleForm.timelinessRate" style="width: 100%" :precision="0" :min="0" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="入库批号" prop="warehousingLotNo">
              <el-input v-model="ruleForm.warehousingLotNo" maxlength="200" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="已检" prop="checked">
              <el-select v-model="ruleForm.checked" style="width: 100%" filterable>
                <el-option label="是" value="是" />
                <el-option label="否" value="否" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <!--     <span slot="footer">
      <el-button type="info" @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    </span> -->
  </el-dialog>
</template>
<script>
export default {
  props: {
    receiptNoList: {
      type: Array,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      title: '',
      ruleForm: {
        checked: '是',
        quantityOfReturned: '',
        quantityReceived: '',
        storageQuantity: '',
        supplierLotNo: '',
        timelinessRate: '',
        warehousingLotNo: '',
        receiptId: ''
      },
      rules: {
        receiptId: [{ required: true, message: '请选择收货单号！', trigger: 'change' }]
      },
      dialogVisible: false
    }
  },
  watch: {},
  mounted() {},
  methods: {
    /**
     * @description: 新增编辑
     * @param {*} row
     * @return {*}
     */
    async showDialog(row) {
      if (row && row.hasOwnProperty('id')) {
        this.title = '编辑'
        this.ruleForm = Object.assign({}, row)
      } else {
        this.title = '新增'
      }
      this.dialogVisible = true
    },
    /**
     * @description: 表单提交
     * @param {*} formName
     * @return {*}
     */
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const res = await this.$axios.post('/purchase/statistics/rate/save', this.ruleForm)
          if (res?.data.code === 200) {
            this.$notify.success('提交成功！')
            this.dialogVisible = false
            this.$emit('getTableInfo')
          } else {
            this.$notify.error(res.data.msg)
          }
        }
      })
    },
    /**
     * @description: 重置表单
     * @param {*} formName
     * @return {*}
     */
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.ruleForm = Object.assign({}, this.$options.data.call(this).ruleForm)
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
